<template>
  <div>
    <SlotCom>
      <template v-slot:title>本周热搜 Top5</template>
      <template v-slot:change></template>
      <template v-slot:list>
        <ul>
          <li v-for="item in list1" :key="item.id">
            <p>{{ item.text }}</p>
            <p><span>🔥</span>{{ item.num }}</p>
          </li>
        </ul>
      </template>
    </SlotCom>
    <SlotCom>
      <template v-slot:title>可能感兴趣的人</template>
      <template v-slot:change>⭕换一批</template>
      <template v-slot:list>
        <ul>
          <li v-for="item in list2" :key="item.id">
            <div>
              <p>
                <span class="name">{{ item.name }}</span>
                <span v-if="item.gender === 0">♂</span>
                <span v-if="item.gender === 1">♀</span>
                <span>{{ item.age }}岁</span>
              </p>
              <p>研究领域:{{ item.place }}</p>
              <p>{{ item.work }}:{{ item.job }}</p>
            </div>
            <div class="fo">+ 关注</div>
          </li>
        </ul>
      </template>
    </SlotCom>
  </div>
</template>
<script>
import SlotCom from "./05zuoye/six-SlotPractice/SlotCom.vue";
export default {
  components: {
    SlotCom,
  },
  data() {
    return {
      list1: [
        { id: 1, text: "#区块链", num: 96 },
        { id: 2, text: "#数据挖掘", num: 91 },
        { id: 3, text: "#无人机", num: 87 },
        { id: 4, text: "#生命科学", num: 72 },
        { id: 5, text: "#传感器", num: 60 },
      ],
      list2: [
        {
          id: 1,
          name: "李国盛",
          gender: 0,
          age: 52,
          place: "机电一体化技术",
          work: "哈尔滨工业大学",
          job: "教授",
        },
        {
          id: 2,
          name: "陈颖",
          gender: 1,
          age: 36,
          place: "人工智能",
          work: "清华大学",
          job: "副教授",
        },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
</style>
